<template>
    <div class="pb_a">
        <van-nav-bar class="head_nb" title="科目选择" left-text="返回" left-arrow @click-left="$router.back();"/>

        <div class="pt_a">
            <div class="subject_select" v-if="user.userId!=''">
                <!--已登录：没选科目-->
                <div class="cell_group">
                    <!--提示文本-->
                    <div class="ft_14 txt_cr txt_40">
                        <van-icon name="warning-o" size="1rem" class="icon_mid ml_10"/>
                        <span>请先选择考试科目：</span>
                        <span style="position:absolute;right:1rem;" v-if="showSubject" @click="showSubject=false">
                            切换类型<van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </span>
                    </div>

                    <!--科目类别-->
                    <van-tree-select
                        v-if="!showSubject"
                        @click-nav="nav"
                        @click-item="navItem"
                        :items="types"
                        :active-id.sync="secondTypeId"
                        :main-active-index.sync="firstTypeIndex"/>

                    <!--科目列表-->
                    <van-cell-group :title="title" v-if="showSubject">
                        <van-cell
                            v-for="item in subjects"
                            :key="item.id"
                            :title="item.name"
                            is-link
                            @click="cellItem(item.id)"
                            :class="{ cell_selected: item.id==subjectId }"/>
                    </van-cell-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {mapActions, mapState} from 'vuex';
    import common from '../../common/common';
    import {getSubject, getSubjectType, reqSubjectSelect, reqUserSubject} from '../../api';
    import {NavBar, TreeSelect} from 'vant';

    Vue.use(TreeSelect);
    Vue.use(NavBar);
    export default {
        name: "Subject",
        data() {
            return {
                showSubject: false,
                firstTypeId: '',
                secondTypeId: '',
                firstTypeIndex: 0,
                types: [],
                title: '',
                subjects: [],
                subjectId: ''
            };
        },
        async created() {
            //异步获取用户选择的科目
            const user = this.user;
            if (user.userId != '') {
                await this.reqUserSubject();
                this.subjectId = this.subject.subjectId;
                this.firstTypeId = this.subject.firstTypeId;
                this.secondTypeId = this.subject.secondTypeId;
            }

            //异步获取科目类别
            let result = await getSubjectType();
            if (result.code === 0) {
                this.types = result.data;
            }

            //异步获取所有的科目
            const params = {'id': this.subjectId};
            result = await getSubject(params);
            if (result.code === 0) {
                this.subjects = result.data;
            }
        },
        computed: {
            ...mapState(['user', 'subject']),
        },
        methods: {
            ...mapActions(['reqUserSubject']),
            nav(index) {
                console.log(index);
            },
            async navItem(data) {
                this.title = data.text;
                const params = {'secondTypeId': data.id};
                const result = await getSubject(params);
                if (result.code === 0) {
                    this.showSubject = true;
                    this.subjects = result.data;
                }
            },
            async cellItem(id) {
                const oldSubjectId = this.subjectId;
                this.subjectId = id;
                const params = {'userId': this.user.userId, 'subjectId': id};
                const result = await reqSubjectSelect(params);
                if (result.code === 0) {
                    common.toast('success', '科目选择成功！', () => {
                        //表示已选科目
                        this.firstTypeId = result.data.firstTypeId;
                        //将subject保存到vuex的state
                        this.$store.dispatch('setSubject', result.data);
                        this.$router.back();
                    });
                } else {
                    this.subjectId = oldSubjectId;
                }
            }
        }
    }
</script>

<style scoped>
    .cell_group .van-cell-group__title {
        background: #fff;
    }

    .cell_selected {
        color: #ee0a24;
    }

    .cell_selected .van-icon-arrow {
        color: #ee0a24;
    }
</style>
